import React, { Component } from 'react'
import { Modal, Button, Form, message } from 'antd'
import E from 'wangeditor'
import API from 'UTIL/libs/api'
import pick from 'UTIL/libs/file/picker.js'
import './wangeditor.less'

export default class Editor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      videoVisible: false,
      imageVisible: false,
      loading: false
    }
  }
  static defaultProps = {
    style: {
      textAlign: 'left',
      width: '100%',
      height: '360px'
    }
  }
  // 取代默认点击事件
  handleClickEditor = (e) => {
    if (e.target.className == 'w-e-icon-play' || e.target.children[0].className == 'w-e-icon-play') {
      e.preventDefault()
      // 默认panel不展示
      var videoPanel = document.querySelector('.w-e-panel-container')
      videoPanel.style.display = 'none'
      this.setState({
        videoVisible: true
      })
    } else if (e.target.className == 'w-e-icon-image' || e.target.children[0].className == 'w-e-icon-image') {
      e.preventDefault()
      // 默认panel不展示
      var imagepPanel = document.querySelector('.w-e-panel-container')
      imagepPanel.style.display = 'none'
      this.setState({
        imageVisible: true
      })
    }
  }
  // 图片上传
  uploadImage = ()=> {
    pick('image').then((file) => {
      pick.toBase64(window.URL.createObjectURL(file)).then((base64str)=>{
        this.setState({
          loading: true
        })
        API.callJson('/upload-img')({
          img: base64str
        }).then((data)=>{
          console.log(data)
          this.setState({
            uploadImage: data,
            loading: false
          })
          message.success('上传成功')
        }).catch((msg)=>{
          console.log(msg)
          this.setState({
            loading: false
          })
          message.error('上传失败')
        })
      }).catch((msg)=>{
        message.error('图片读取出错，请上传正确格式图片')
      })
    })
  }
  // 确认图片上传
  handleImageOk = ()=> {
    var { editor, uploadImage } = this.state
    this.setState({
      imageVisible: false,
      uploadImage: null
    })
    editor.txt.append(`<br><img src=${uploadImage.img} />`)
  }
  // 确认视频上传
  handleVideoOk = ()=> {
    var { editor } = this.state
    this.setState({
      videoVisible: false,
      uploadImage: null
    })
    editor.txt.append('<p>追加视频内容</p>')
  }
  // 取消上传
  handleCancel = ()=> {
    this.setState({
      videoVisible: false,
      imageVisible: false,
      uploadImage: null
    })
  }
  // 获取内容
  getEditorContext() {
    var { editor } = this.state
    return editor.txt.html()
  }
  // 设置内容
  setEditorContext(context) {
    var { editor } = this.state
    editor.txt.html(context)
  }
  // 获取内容，自定义点击事件，监听事件
  componentDidMount() {
    const elem = this.refs.editorElem
    elem.addEventListener('click', this.handleClickEditor)
    const editor = new E(elem)
    editor.create()
    this.setState({
      editor: editor
    })
  }
  // 取消事件监听
  componentWillUnmount() {
    const elem = this.refs.editorElem
    elem.removeEventListener('click', this.handleClickEditor)
  }
  render() {
    var { style } = this.props
    var { videoVisible, imageVisible, loading, uploadImage } = this.state
    return <div className="tederen-wangeditor">
      <div ref="editorElem" style={style}></div>
      <Modal
        title="上传图片"
        visible={imageVisible}
        onOk={this.handleImageOk}
        onCancel={this.handleCancel}
        okText="保存"
        cancelText="取消"
      >
        <Form >
          <div className="ad-modal-addon">
            <div className="ad-uploadBtn">
              <Button onClick={this.uploadImage} loading={loading}>上传图片</Button>
            </div>
            {
              uploadImage && uploadImage.img ? <div className="preview">
                <img src={uploadImage.img} />
              </div> : null
            }
          </div>
        </Form>
      </Modal>
      <Modal
        title="上传视频"
        visible={videoVisible}
        onOk={this.handleVideoOk}
        onCancel={this.handleCancel}
        okText="保存"
        cancelText="取消"
      >
        <Form >
          <div className="ad-modal-addon">
            <div className="ad-uploadBtn">
              <Button>上传视频</Button>
            </div>
          </div>
        </Form>
      </Modal>
    </div>
  }
}
